import {defineComponent, reactive, shallowReactive, watch} from 'vue'
// 声明类型
const PropsType = {
  tableConfig: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {

    // 配置项
    let config: { data: any; rowNum: any; header: any; columnWidth: any; headerHeight: any ;headerBGC: any; oddRowBGC: any; evenRowBGC: any;index: any;align: any} = shallowReactive({
      header: null,
      data: null,
      rowNum:5,
      headerHeight:35,
      columnWidth: null,
      headerBGC: '#0f1325', //表头
      oddRowBGC: '#0f1325', //奇数行
      evenRowBGC: '#171c33', //偶数行
      index: true,
      align: ['center']
    })


    // 监听数据变化
    watch(
        () => props,
        (props: any) => {
          // console.log("draw watch new")
          // console.log(val)
          config = {
            header: props.tableConfig.header?props.tableConfig.header:[],
            data: props.tableConfig.data?props.tableConfig.data:[],
            rowNum: props.tableConfig.rowNum?props.tableConfig.rowNum:5, //表格行数
            headerHeight: props.tableConfig.headerHeight?props.tableConfig.headerHeight:35,
            columnWidth: props.tableConfig.columnWidth?props.tableConfig.columnWidth:[],
            headerBGC: '#0f1325', //表头
            oddRowBGC: '#0f1325', //奇数行
            evenRowBGC: '#171c33', //偶数行
            index:  props.tableConfig.index?props.tableConfig.index:true,
            align:  props.tableConfig.align?props.tableConfig.align:['center'],
          }
        },
        {
          immediate: true,
          deep: true
        }
    )
    return () => {
      return <dv-scroll-board class="dv-scr-board" config={config} />
    }
  },

})

